<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import { numberApi } from '@/api/controller'
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  import { ElMessageBox } from "element-plus";
  const action = reactive({
    dialogFormVisible:false,
    user_id:'',
    title:'',
  })
  const list = ref()
  const getRoomAdminList = async()=>{
    const loading = Toastloading()
    const res = await numberApi.getRoomAdminList({ user_id: action.user_id })
    loading.close()
    const { data=[]} = res
    list.value = data
  }
  const cancelAdmin = (row:any={})=>{
    const { room_id=0 } = row
    if(!room_id) return ToastWarning('room_id error')
    ElMessageBox.confirm("确定取消管理吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        const loading = Toastloading();
        await numberApi.cancelRoomAdmin({
          user_id:action.user_id,
          room_id:row.room_id
        })
        await getRoomAdminList()
        loading.close();
        ToastSuccess("操作成功!");
      })
      .catch(() => { });
  }
  const openDialog = async(query:any = {})=> {
    const { user_id='', nickname='' } = query;
    Object.assign(action,{
      user_id,
      title:`${nickname}房间列表`
    })
    await getRoomAdminList()
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="10vh"
    class="xm-dialog"
    v-model="action.dialogFormVisible"
    :title="action.title">
      <el-table class="xm-main" :data="list" border>
        <el-table-column min-width="100" prop="room_uid" align="center" label="房间id" />
        <el-table-column min-width="180" prop="name" align="center" label="房间名称" />
        <el-table-column min-width="100" prop="certified" align="center" label="认证状态">
          <template #default="scope">
            <el-tag>{{scope.row.certified === 1 ? "已认证" : "未认证"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="cancelAdmin(scope.row)"
              :disabled="scope.row.certified == 1"
              >取消管理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
  .xm-dialog{
    .el-input {
        width: calc($inputWidth);
    }
}
</style>